<template>
  <div class="customer">
    <div class="customerfifter">
      <el-form :inline="true" :model="customerFrom" class="demo-form-inline">
        <el-form-item label="手机号：">
          <el-input v-model.trim="customerFrom.phone" size="small" clearable placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="短信内容：">
          <el-input v-model.trim="customerFrom.content" size="small" clearable  placeholder="请输入短信内容"></el-input>
        </el-form-item>
        <el-form-item label="短信模板：">
          <el-select ref="templateNameRef" v-model="customerFrom.templateName" size="small" placeholder="请选择短信模板" clearable filterable @visible-change="getSmsTemplatePageInfo" @keydown.native="selectBlur($event)">
            <el-option v-for="item in templateList" :key="item.id" size="small" :label="item.templateName" clearable :value="item.templateName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送状态：">
          <el-select ref="statusRef" v-model="customerFrom.status" size="small" placeholder="请选择发送状态" clearable filterable @visible-change="getSendStatusList" @keydown.native="selectBlur($event)">
            <el-option v-for="item in SendStatusList" :key="item.status" size="small" :label="item.msg" :value="item.status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送日期">
          <el-date-picker size="small" v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Launchdate)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="customerList" style="width: 100%" :default-sort="{prop: 'times'}" border>
      <el-table-column prop="sendTime" label="发送时间" sortable width="160">
      </el-table-column>
      <el-table-column prop="sendCount" label="发送条数" width="80">
      </el-table-column>
      <el-table-column prop="templateName" label="短信模板" width="120">
      </el-table-column>
      <el-table-column prop="content" label="发送内容" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="sender" label="发送人" width="100">
      </el-table-column>
      <el-table-column prop="receiverPhone" label="收信人" width="120">
      </el-table-column>
      <el-table-column prop="status" label="发送状态" width="80">
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" layout="sizes,prev, pager, next,total" :page.sync="customerFrom.page"
      :limit.sync="customerFrom.size" @pagination="getList" />
  </div>
</template>

<script>
  import {
    SmsTemplateNameAndContent,
    SmsSendStatus,
    SmsSendRecordPageInfo,
  } from "@/api/customer";
  import Pagination from "@/components/Pagination"; // 分页
  export default {
    components: {
      Pagination,
    },
    data() {
      return {
        customerFrom: {
          phone: '',
          content: '',
          templateName: '', //模版名称
          startDate: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD")
            .toString(),
          endDate: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD")
            .toString(),
          page: 1, //页码
          size: 10, //每页页码
          status: '',
        },
        total: 0,
        listLoading: false,
        customerList: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
        templateList: [],
        SendStatusList: [],
      }
    },
    mounted() {
      this.getList();
      window.addEventListener("keydown",this.keyupEnter);
    },
    methods: {
      getSmsTemplatePageInfo() {
        SmsTemplateNameAndContent().then(res => {
          this.templateList = res.data.data
        })
      },
      getSendStatusList() {
        SmsSendStatus().then(res => {
          this.SendStatusList = res.data.data
        })
      },
      getList() {
        SmsSendRecordPageInfo(this.customerFrom).then(res => {
          this.listLoading = true;
          this.customerList = res.data.data.rows;
          this.total = res.data.data.total;
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);

        })

      },
      handleFilter(times) {
        if (times) {
          this.customerFrom.startDate = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.customerFrom.endDate = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.customerFrom.startDate);
        var time2 = Date.parse(this.customerFrom.endDate);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.customerFrom.page=1;
          this.getList();
        }
      },
      // 回车事件
      keyupEnter(){
        if(window.event.keyCode == 13 ){
          this.handleFilter(this.Launchdate);// 查询事件
        }
      },
      // 选择框回车失焦
      selectBlur(e) {
        if(e.keyCode == 13) {
          this.$refs['templateNameRef'].blur();
          this.$refs['statusRef'].blur();
          e.returnValue = false;
        }
      }
    },
    destroyed() {
      window.removeEventListener("keydown",this.keyupEnter);
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown",this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown",this.keyupEnter);
    }
  }
</script>


<style lang="scss">
  .customer {
    padding: 20px;

    .customerfifter {}
  }
</style>
